<template>
  <div>
    <Row :gutter="10">
      <i-col span="6" :sm="24" :md="9" :lg="6">
        <Card :dis-hover='true' :shadow='true'>
          <TreeMenu
            :isEdit='isEdit'
            :tree='treeData'
            @getMenus='_getMenu'
            @addMenuEvent='addMenu'
            @editMenuEvent='editMenu'
            @deleteMenuEvent='deleteMenu'
            @on-select='handleTreeChange'
          />
        </Card>
      </i-col>
      <i-col span="18" :sm="24" :md="15" :lg="18">
        <Card
          title='菜单选项'
          class='auiu-card'
          :dis-hover='true'
          :shadow='true'
        >
          <MenuForm
            :data='formData'
            :isEdit='isEdit'
            :selectNode='selectNode'
            @cancel='initForm'
            @submit='submit'
          />
        </Card>
        <!--        <Card title="资源选项" :dis-hover="true" :shadow="true">-->
        <!--          <OperationsTable-->
        <!--            :columns='columns'-->
        <!--            :tableData='tableData'-->
        <!--            :isEdit='isEdit'-->
        <!--            @on-change='handleTableChange'-->
        <!--          />-->
        <!--        </Card>-->
      </i-col>
    </Row>
  </div>
</template>

<script>
import TreeMenu from './tree.vue'
import MenuForm from './form.vue'

import { sortMenus } from '@/utils'
import { menuDispatch } from '@/api/admin'

export default {
  components: {
    TreeMenu,
    MenuForm
  },
  data() {
    return {
      isEdit: false,
      selectNode: [],
      treeData: [],
      type: '',
      formData: {
        id: null,
        parentId: 0,
        title: '',
        name: '',
        component: '',
        path: '',
        icon: '',
        redirect: '',
        sort: 0,
        hideInBread: false,
        hideInMenu: false,
        hideChildren: false,
        notCache: false,
        type: 1,
        link: '',
        remark: '',
        operations: []
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          hidden: true
        },
        {
          title: '资源名称',
          key: 'name',
          search: {
            type: 'input'
          },
          align: 'center'
        },
        {
          title: '资源路径',
          key: 'path',
          search: {
            type: 'input'
          },
          align: 'center'
        },
        {
          title: '请求类型',
          key: 'method',
          search: {
            type: 'input'
          },
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.method ? params.row.method.toUpperCase() : '')
          }
        },
        {
          title: '资源类型',
          key: 'type',
          search: {
            type: 'radio',
            options: [
              {
                key: '全部',
                value: ''
              },
              {
                key: '接口',
                value: 1
              },
              {
                key: '按钮',
                value: 2
              }
            ]
          },
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.type === 1 ? '接口' : '按钮')
          }
        },
        {
          title: '资源描述',
          key: 'remark',
          hidden: true,
          align: 'center'
        },
        {
          title: '设置',
          key: 'settings',
          slot: 'action',
          hidden: true,
          fixed: 'right',
          width: 100,
          align: 'center'
        }
      ],
      tableData: [],
      selection: []
    }
  },
  mounted() {
    this._getMenu()
  },
  methods: {
    _getMenu() {
      menuDispatch.use('get').then((res) => {
        if (res.code === 200) {
          this.treeData = res.data
        }
      })
    },
    submit(data) {
      // if (this.tableData.length > 0) {
      //   data.operations = this.tableData
      // }
      if (this.type !== '') {
        if (this.type === 'parent') {
          data.parentId = 0
        } else if (this.type === 'bro') {
          const selectNode = this.selectNode[0]
          data.parentId = selectNode.parentId
        } else if (this.type === 'child') {
          const selectNode = this.selectNode[0]
          data.parentId = selectNode.id
        } else {
          this.$Message.error('请选择添加菜单的节点')
        }
        menuDispatch.use('add', data).then((res) => {
          if (res.code === 200) {
            this.$Message.success('添加菜单成功！')
            this.treeData = sortMenus([...this.treeData])
            this.initForm()
            this._getMenu()
          } else {
            this.$Message.error('添加菜单失败！')
          }
        })
      } else {
        menuDispatch.use('update', data).then((res) => {
          if (res.code === 200) {
            this.$Message.success('编辑菜单成功！')
            this.treeData = sortMenus([...this.treeData])
            this.initForm()
            this._getMenu()
          }
        })
      }
    },
    initForm() {
      this.isEdit = false
      this.type = ''
      this.formData = {
        title: '',
        name: '',
        component: '',
        path: '',
        icon: '',
        redirect: '',
        sort: 0,
        hideInBread: false,
        hideInMenu: false,
        hideChildren: false,
        notCache: false,
        type: 1,
        link: '',
        remark: '',
        operations: []
      }
      this.tableData = []
    },
    addMenu(type) {
      this.initForm()
      this.type = type
      this.isEdit = true
    },
    editMenu(select) {
      this.isEdit = true
      this.formData = select
    },
    deleteMenu(select) {
      // 判断是删除一级菜单 还是删除子菜单
      const ids = [select.id]
      menuDispatch.use('delete', ids).then((res) => {
        if (res.code === 200) {
          this.$Message.success('删除菜单成功！')
        } else {
          this.$Message.error(res.message)
        }
        this.initForm()
        this._getMenu()
      })
    },
    handleTreeChange(item) {
      if (item.length === 0) {
        return
      }
      // 非编辑状态
      if (!this.isEdit) {
        this.selectNode = item
        this.formData = item[0]
        this.tableData = [...item[0].operations]
      } else {
        this.$Message.error('当前为编辑状态，请取消编辑后查看！')
      }
    },
    handleTableChange(table) {
      this.tableData = table
    }
  }
}
</script>

<style lang="scss">
@media screen and (max-width: 1200px) {
  .auiu-btn-group {
    .ivu-icon {
      & + span {
        display: none;
      }
    }

    .auiu-dropdown {
      display: none;
    }
  }
}

.auiu-card {
  margin-bottom: 10px;
}

.ctrls {
  button {
    margin-right: 10px;
  }
}

.auiu-btn-group {
  .ivu-icon {
    & + span {
      margin-left: 0;
    }
  }

  &.editing {
    a {
      color: #dcdee2;
    }

    .ivu-btn-primary {
      border-color: #dcdee2 !important;
    }

    button:first-child {
      border-right: 0;
    }
  }
}
</style>
